<template>
  <el-dialog width="40%" :visible.sync="visible" :title="!dataForm.deptId ? $t('add') : $t('update')" :close-on-click-modal="false" :close-on-press-escape="false" >
    <el-form  :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()" label-width="120px" >
		<el-form-item  prop="deptType" :label="$t('dept.deptType')" size="mini">
			<el-tooltip placement="top">
				<div slot="content">
				  公司即为门店
				</div>
				<!-- elementui图标库：显示黑色的问号图标   -->
				<i class="el-icon-question" style="margin-left: -11px;margin-right: 5px;" /> 
			  </el-tooltip>
			<el-radio-group v-model="dataForm.deptType" :disabled="!!dataForm.deptId">
			  <el-radio :label="1">{{ $t('dept.deptType1') }}</el-radio>
			  <el-radio :label="0">{{ $t('dept.deptType0') }}</el-radio>
			</el-radio-group>
		</el-form-item>
		<el-form-item prop="parentName" :label="$t('dept.parentName')" class="dept-list">
		  <el-popover v-model="deptListVisible" ref="deptListPopover" placement="bottom-start" trigger="click">
			<el-tree
			  :data="deptList"
			  :props="{ label: 'deptName', children: 'children' }"
			  node-key="deptId"
			  ref="deptListTree"
			  :highlight-current="true"
			  :expand-on-click-node="false"
			  accordion
			  @current-change="deptListTreeCurrentChangeHandle">
			</el-tree>
		  </el-popover>
		  <el-input v-model="dataForm.parentName" v-popover:deptListPopover :readonly="true" :placeholder="$t('dept.parentName')" style="width: auto;">
			<i
			  v-if="$store.state.user.superAdmin === 1 && dataForm.parentId !== '0'"
			  slot="suffix"
			  @click.stop="deptListTreeSetDefaultHandle()"
			  class="el-icon-circle-close el-input__icon">
			</i>
		  </el-input>
		</el-form-item>
		
		
		<div class="inlineItem" >
		  <el-form-item  prop="deptName" :label="$t('dept.name')">
			<el-input v-model="dataForm.deptName" :placeholder="$t('dept.name')"></el-input>
		  </el-form-item>
		  <el-form-item prop="deptRank" :label="$t('dept.sort')">
		    <el-input-number v-model="dataForm.deptRank" controls-position="right" :min="0" :label="$t('dept.sort')"></el-input-number>
		  </el-form-item>
		</div>
		
		<div class="inlineItem" >
		  <el-form-item prop="leader" :label="$t('dept.leader')">
			<el-input v-model="dataForm.leader" :placeholder="$t('dept.leader')"></el-input>
		  </el-form-item>
		  <el-form-item prop="phone" :label="$t('dept.phone')">
		  		<el-input v-model="dataForm.phone" :placeholder="$t('dept.phone')"></el-input>
		  </el-form-item>
		</div>
		
		<div class="inlineItem" >
		  <el-form-item prop="email" :label="$t('dept.email')">
			<el-input v-model="dataForm.email" :placeholder="$t('dept.email')"></el-input>
		  </el-form-item>
		   <el-form-item prop="status" :label="$t('status')" size="mini">
		  		<el-radio-group v-model="dataForm.status">
		  		  <el-radio :label="true">{{ $t('status1') }}</el-radio>
		  		  <el-radio :label="false">{{ $t('status0') }}</el-radio>
		  		</el-radio-group>
		  </el-form-item>
      </div>
      
    </el-form>
    <template slot="footer">
      <el-button @click="visible = false">{{ $t('cancel') }}</el-button>
      <el-button type="primary" @click="dataFormSubmitHandle()">{{ $t('confirm') }}</el-button>
    </template>
  </el-dialog>
</template>

<script>
import debounce from 'lodash/debounce'
export default {
  data () {
    return {
	  extendsParam: [],
	  modifyExtendsParam: {},
      visible: false,
      deptList: [],
      deptListVisible: false,
      dataForm: {
		id: '',
        deptId: '',
        deptName: '',
        parentId: '',
        parentName: '',
        deptRank: 1,
		leader: '',
		phone: '',
		email: '',
		status: true,
		deptType: 1
      }
    }
  },
  computed: {
    dataRule () {
      return {
        deptName: [
          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
        ],
        parentName: [
          { required: true, message: this.$t('validate.required'), trigger: 'change' }
        ],
		deptRank: [
		  { required: true, message: this.$t('validate.required'), trigger: 'change' }
		]
      }
    }
  },
  methods: {
    init () {
      this.visible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].resetFields();
		this.dataForm.deptId = this.modifyExtendsParam.deptId;
		this.getDeptList();
		if(this.dataForm.deptId){
			this.getInfo()
		}else if (this.$store.state.user.superAdmin === 1){
			this.deptListTreeSetDefaultHandle();
		}
        // this.getDeptList().then(() => {
        //   if (this.dataForm.deptId) {
        //     this.getInfo()
        //   } else if (this.$store.state.user.superAdmin === 1) {
        //     this.deptListTreeSetDefaultHandle()
        //   }
        // })
      })
    },
    // 获取部门列表
    getDeptList () {
		this.deptList = this.extendsParam;
		return this.deptList;
    },
    // 获取信息
    getInfo () {
		// alert(this.modifyExtendsParam);
		var tt = this.modifyExtendsParam;
        this.dataForm = {
          ...this.dataForm,
          ...tt
        }
		this.modifyExtendsParam = {}
		if (this.dataForm.parentId === '0') {
		  return this.deptListTreeSetDefaultHandle()
		}
		this.$refs.deptListTree.setCurrentKey(this.dataForm.pid)
    },
    // 上级部门树, 设置默认值
    deptListTreeSetDefaultHandle () {
      this.dataForm.parentId = '0'
      this.dataForm.parentName = this.$t('dept.parentNameDefault')
    },
    // 上级部门树, 选中
    deptListTreeCurrentChangeHandle (data) {
      this.dataForm.parentId = data.deptId
      this.dataForm.parentName = data.deptName
      this.deptListVisible = false
    },
    // 表单提交
    dataFormSubmitHandle: debounce(function () {
      this.$refs['dataForm'].validate((valid) => {
        if (!valid) {
          return false
        }
		
		var url = !this.dataForm.deptId ? '/pc/dept/add' : '/pc/dept/modify';
		
        this.$http.post(url, this.dataForm).then(({ data: res }) => {
          if (res.code !== 200) {
            return this.$message.error(res.msg)
          }
          this.$message({
            message: this.$t('prompt.success'),
            type: 'success',
            duration: 500,
            onClose: () => {
              this.visible = false
              this.$emit('refreshDataList')
            }
          })
        }).catch(() => {})
      })
    }, 1000, { 'leading': true, 'trailing': false })
  }
}
</script>

<style lang="scss">
.mod-sys__dept {
  .dept-list {
    .el-input__inner,
    .el-input__suffix {
      cursor: pointer;
    }
  }
}
.inlineItem {
	display: flex; 
	flex-wrap: nowrap; 
	justify-content: flex-start; 
	align-items: center; 
}

</style>
